<template>
  <div class="content">
    <!-- 服务体系 -->
    <div class="ser-sys">
      <p class="ser-sys-title">晨心五大服务体系</p>
      <p class="ser-sys-retitle">Five Service System</p>
      <div class="ser-sys-content">
        <span v-for="(item,index) in data" :key="index" @click="change(index)" :class="{active:index==current}">{{item.ti}}</span>
      </div>
      <div class="ser-sys-cont" v-for="(item,index) in serdata" :key="index" ref="index" v-show="count===index">
          <div class="serimg">
              <img :src="item.serimg" alt="" width="100%" height="100%">
          </div>
          <div class="sershow">
              <p class="sershow-title">{{item.sercont1}}</p>
              <p class="sershow-cont">{{item.sercont2}}</p>
              <div class="sershow-list">
                  <ul>
                      <li v-for="(items,idx) in item.child[0].cldcont" :key="idx">
                       <span>{{items}}</span>
                      </li>
                     
                  </ul>
              </div>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data:[
        {
          ti:'育婴师 保姆'
        },
        {
          ti:'母婴护理师 月嫂'
        },
        {
          ti:'家政服务师 保洁员'
        },
        {
          ti:'陪护 护工'
        },
        {
          ti:'住家保姆 烧饭保洁'
        },
      ],
      serdata: [
        {
          id: "1",
          serimg: "http://res0.chenxin99.com/images/baomu/24639t0181a40c06e777bc22.jpg",
          sercont1: "育婴师 育儿嫂",
          sercont2:
            "主要从事0-3岁婴儿照料、护理和教育工作。 带小孩保姆根据婴儿在不同阶段生长发育的具体情况，科学地对婴儿的生理、心理、教育等方面进行照料，帮助婴 儿健康成长。",
          child: [
            {
              cldcont: [
                "日常护理",
                "婴儿早教",
                "婴儿喂养",
                "溢奶护理",
                "洗澡抚触",
                "协助哺乳",
              ],
            },
          ],
        },
        {
          id: "2",
          serimg: "http://res0.chenxin99.com/images/baomu/1398349201698e917e8ba41cc03cf2c33430d.jpg",
          sercont1: "母婴护理师 月嫂",
          sercont2:
            "工作内容主要是产妇照料和新生儿护理，为新妈妈的恢复和宝宝的成长保驾护航。",
          child: [
            {
              cldcont: [
                "产褥期护理",
                "饮食护理",
                "心理护理",
                "月子餐30天食",
                "新生儿护理",
                "脐带护理",
              ],
            },
          ],
        },
        {
          id: "3",
          serimg: "http://res0.chenxin99.com/images/baomu/115904t01abbd6737612d50a9.jpg",
          sercont1: "家政服务师",
          sercont2:
            "主要负责家庭的烹饪、保洁、洗衣、收纳、 熨烫，用专业的技能为您打造舒适、优质的生活。",
          child: [
            {
              cldcont: [
                "深度清洁",
                "新房开荒",
                "公司保洁",
                "洗衣熨烫",
                "家庭保洁",
                "临时保洁",
              ],
            },
          ],
        },
        {
          id: "4",
          serimg: "http://res0.chenxin99.com/images/baomu/405461-1FS1144445137.png",
          sercont1: "护工-陪护",
          sercont2:
            "住家保姆照顾老人具有专业的护理技能及护理经验；用爱心、耐心、责任心为所服务的雇主带来舒适的生活。照顾病人、陪护老人完成生活所需，如买菜做饭，家居清洁，针对半自理，不能自理、植物人或瘫痪卧床的病人进行专业的康复护理、情绪安抚及心理沟通。护工：具有较强的服务意识和奉献精神，具有较好的病情观察判断能力和应急处理能力，格尽职守，工作细心周到，为雇主解决后顾之忧！",
          child: [
            {
              cldcont: [
                "疾病调理",
                "喂食喂药",
                "营养搭配",
                "协助起居",
                "烧饭保洁",
                "污物处理",
              ],
            },
          ],
        },
        {
          id: "5",
          serimg: "http://res0.chenxin99.com/images/baomu/143340t012759b9d7c172c6a7.jpg",
          sercont1: "住家保姆 烧饭保洁阿姨",
          sercont2:
            "对客户的家庭事务进行全面安排，具体安排其他家庭服务员的日常工作。能针对客户家人的不同特点，调配膳食，美化家庭环境，科学体育锻炼，安排家庭休闲娱乐、旅游，迎送宾客，指导合理的作息等等。",
          child: [
            {
              cldcont: [
                "衣服熨烫",
                "美化家庭环境",
                "营养膳食",
                "照顾小孩",
                "照顾老人",
                "居家保洁",
              ],
            },
          ],
        },
      ],
      current:0,
      count:0,
    };
  },
  methods:{
      change(val){
        this.current=val
         for(let i = 0 ; i < this.$refs.index.length ;i++){
           if(val === i){
             this.count = i
           }
         }
      },
  }
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ser-sys {
  width: 1200px;
  margin: 50px auto 0;
}
.ser-sys-title {
  text-align: center;
  font-size: 26px;
  color: black;
}
.ser-sys-retitle {
  margin-top: 10px;
  font-size: 16px;
  color: black;
  text-align: center;
}
.ser-sys-content {
  margin-top: 30px;
  display: flex;
}
.ser-sys-content > span {
  margin-left: 50px;
  width: 138px;
  height: 40px;
  border-radius: 20px;
  background-color:#e2dfdf;
  text-align: center;
  line-height: 40px;
  color: black;
  padding: 0 5px;
  cursor: pointer;
}
.ser-sys-content > span:nth-of-type(1) {
  margin-left: 150px;
}
.ser-sys-content > span:hover{
  background-color: #ff6780;
  color: white;
}
.active{
  color: #fff !important;
  background: #ff6780  !important;
}
.ser-sys-cont{
    margin-top: 30px;
    display: flex;
   
}
.serimg{
    width: 60%;
    height: 415px;
}
.sershow{
    width: 50%;
    margin-left: 100px;
    position: relative;
}
.sershow-title{
    font-size: 20px;
    color: #fe96ac;
}
.sershow-cont{
    margin-top: 30px;
    color: black;
}
.sershow-list{
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 100%;
}
.sershow-list>ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.sershow-list>ul>li{
    width:30%;
    margin-bottom: 30px;
    color: black;
    cursor: pointer;
}
.sershow-list>ul>li>span:hover{
  color: #fe96ac;
}

</style>